<template>
    <div id="movieDetails">
        <!-- 电影详情头部 -->
       <div class="nav">
           <van-nav-bar
            title="影片详情"
            left-text=""
            left-arrow
            @click-left="onClickLeft"
            />
       </div>
       <van-loading type="spinner" v-if="isloading"  color="#07c160"  />
       <div class="centent" v-if="iscentent">
            <!-- 简介 -->
            <div class="detail_list">
                <!-- 虚幻背景 -->
                <!-- 正常就使用vuex数据 -->
                <div class="detail_list_bg" :style="{'background-image':'url(' + movieDetail.img+ ')'}" v-if='movieDetail.img'></div>
                <!-- 刷新页面时 使用sessionStorge数据 -->
                <div class="detail_list_bg" :style="{'background-image':'url(' + mdetail.img+ ')'}" v-if="movieDetail.img?false:true"></div>
                <div class="detail_list_filter"></div>
                <!-- 主体内容 -->
                <div class="detail_list_content">
                        <div class="detail_list_img">
                            <img :src="movieDetail.img?movieDetail.img:mdetail.img" alt="">
                        </div>
                        <div class="detail_list_info">
                            <h2>{{movieDetail.nm?movieDetail.nm:mdetail.nm}}</h2>
                            <p>{{movieDetail.enm?movieDetail.enm:mdetail.enm}}</p>
                            <p>{{movieDetail.sc?movieDetail.sc:mdetail.sc}}</p>
                            <p>{{movieDetail.cat?movieDetail.cat:mdetail.cat}}</p>
                            <p>{{movieDetail.src?movieDetail.src:mdetail.src}}/{{movieDetail.episodeDur?movieDetail.episodeDur:mdetail.episodeDur}}分钟</p>
                            <p>{{movieDetail.pubDesc?movieDetail.pubDesc:mdetail.pubDesc}}</p>
                            <p><span class="wish">{{movieDetail.wish?movieDetail.wish:mdetail.wish}}</span>人想看</p>
                        </div>
                </div>
            </div>
            <!-- 电影具体情节描述 -->
            <div class="detail_intro">
                <p>{{movieDetail.dra?movieDetail.dra:mdetail.dra}}</p>
            </div>
            <!-- 电影缩略图 -->
            <van-swipe :autoplay="3000" :show-indicators='false' :width='148'>
                <!-- 正常就使用vuex数据 -->
                <div v-for="(item,index) in movieDetail.photos" :key="index" v-if="movieDetail.photos.length>0">
                    <van-swipe-item>
                        <img :src="item" alt="">
                    </van-swipe-item>
                </div>
                <!-- 刷新页面时 使用sessionStorge数据 -->
                <div v-for="(item,index) in mdetail.photos" :key="index" v-if="movieDetail.photos.length == 0">
                    <van-swipe-item>
                        <img :src="item" alt="">
                    </van-swipe-item>
                </div>
            </van-swipe>       
        </div> 
    </div>
</template>

<script>
    import {
            mapGetters,
            mapState,
            mapMutations,
            mapActions
    } from "vuex";
    export default {
        name: "movie_detail",
        data () {
            return {
                isloading:false,
                iscentent:true,
                mdetail:{
                    nm:null,//电影名
                    enm:null,//电影英文名
                    img:null,//电影大图
                    cat:null,//电影类型
                    dra:null,//剧情描述
                    sc:null,//电影评分
                    src:null,//国家
                    episodeDur:null,//电影时长
                    episodeDur:null,//语言
                    pubDesc:null,//上映时间
                    photos:[],//电影详情图
                    wish:null,//多少人想看
                },
            }
        },
        methods: {
            onClickLeft(){
                this.$router.go(-1);//返回上一层
                this.iscentent = false;//返回上一层时  内容隐藏
            }
        },
        computed: {
            ...mapState(["movieDetail"])
        },
        created () {
            //默认不显示内容
            this.iscentent = false;
            if(JSON.parse(sessionStorage.getItem("movieDetail"))){
                this.mdetail = JSON.parse(sessionStorage.getItem("movieDetail"));
                this.iscentent = true;
            }
        },
        watch: {
           movieDetail:{
               handler: function (newVal,oldVal){
                   //加载过度效果
                   if(newVal !== oldVal&&newVal.nm){
                       this.isloading = true;
                       this.iscentent = false;
                       setTimeout(() =>{
                            this.isloading = false;
                            this.iscentent = true;
                       },1000)
                   }else{
                       this.isloading = false;
                   }
                
            }
           } 
        }
    }
</script>

<style scoped lang='less'>
    #movieDetails{
        .van-hairline--bottom::after {
            border-bottom-width: 0;
        }
        flex: 1;
        overflow: auto;
        position: relative;
        .van-loading{
            text-align: center;
            margin-top: 50px;
        }
        .nav{
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 999;
            .van-nav-bar{
                height: 50px;
                line-height: 50px;
                background-color: #07c160;
               .van-nav-bar__title {
                   color: #fff;
               }
            }
             .van-nav-bar .van-icon{
                   color: #fff;
               }
        }
        .centent{
            margin-top: 50px;
            flex: 1;
            overflow: auto;
        }
        .detail_list{
            height: 200px;
            width: 100%;
            position: relative;
            overflow: hidden;
            .detail_list_bg{
                width: 100%;
                height: 100%;
                background: 0 40%;
                -webkit-filter: blur(20px);
                filter: blur(20px);
                background-size: cover;
                position: absolute;
                left: 0;
                top: 0;
            }
            .detail_list_filter{
                width: 100%;
                height: 100%;
                background-color: #40454d;
                opacity: .55;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }
            .detail_list_content{
                display: flex;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;
                .detail_list_img{
                    width: 110px;
                    height: 150px;
                    border: 1px solid #f0f2f3;
                    margin: 20px;
                    img{
                       height: 100%;
                       width: 100%;
                    }
                }
                .detail_list_info{
                    text-align: left;
                    margin-top: 20px;
                    h2{
                        font-size: 20px;
                        color: #fff;
                        font-weight: 400;
                        line-height: 40px;
                    }
                    p{
                        line-height: 18px;
                        font-size: 12px;
                        color: #ccc;
                    }
                    .wish{
                        color: #ffa500;
                        margin-right: 5px;
                    }
                }
            }
        }
        .detail_intro{
            padding: 10px;
        }
    }
</style>
